<template>
  <Card>
    <div slot="title">
      <Icon type="navicon-round"></Icon>
      菜单管理
      <div class="table-float">
        <Button type="success" shape="circle" icon="plus"  size="small" @click="add()"></Button>
      </div>
    </div>
    <Table border :columns="columns" :data="menus" :loading="loadEnd" :no-data-text="loading"></Table>
  </Card>
</template>
<script>
  import menu from '@/models/setting/sys/menu'

  export default {
    data () {
      return {
        loading: '',
        loadEnd: true,
        columns: [
          {
            title: '菜单名称',
            key: 'name',
            render: (h, params) => {
              let htm = []
              if (params.row.level === 2) {
                htm = h('div', [
                  h('Icon', {
                    props: {
                      type: params.row.icon
                    },
                    style: {
                      'padding-left': '25px'
                    }
                  }),
                  h('strong', params.row.name)
                ])
              } else if (params.row.level === 3) {
                htm = h('div', [
                  h('Icon', {
                    props: {
                      type: params.row.icon
                    },
                    style: {
                      'padding-left': '50px'
                    }
                  }),
                  h('strong', params.row.name)
                ])
              } else {
                htm = h('div', [
                  h('Icon', {
                    props: {
                      type: params.row.icon
                    }
                  }),
                  h('strong', params.row.name)
                ])
              }
              return htm
            }
          },
          {
            title: '菜单等级',
            key: 'level_name',
            align: 'center'
          },
          {
            title: '权重',
            key: 'weight',
            align: 'center'
          },
          {
            title: 'url',
            key: 'url',
            align: 'left'
          },
          {
            title: '上级菜单',
            key: 'up_name',
            align: 'center'
          },
          {
            title: 'css',
            key: 'icon',
            align: 'center'
          },
          {
            title: '操作',
            key: 'action',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.edit(params.row.id)
                    }
                  }
                }, '编辑')
              ])
            }
          }
        ],
        menus: []
      }
    },
    mounted () {
      this.load()
    },
    methods: {
      load () {
        this.loading = '正在加载中......'
        menu.gets().then(r => {
          this.menus = r.menus
          this.loading = '暂无可加载数据......'
          this.loadEnd = false
        }).catch(r => {
          console.log(r)
        })
      },
      add () {
        this.$modal.container(() => import('./add.vue'), (r) => {
          if (r.refresh) {
            this.refresh()
          }
        }, (r) => {
          if (r.refresh) {
            this.refresh()
          }
        }, {})
      },
      edit (id) {
        this.$modal.container(() => import('./edit.vue'), (r) => {
          if (r.refresh) {
            this.refresh()
          }
        }, (r) => {
          if (r.refresh) {
            this.refresh()
          }
        }, {
          id: id
        })
      },
      remove (index) {
        this.menus.splice(index, 1)
      },
      refresh () {
        this.menus = []
        this.load()
      }
    }
  }
</script>
